<template>
  <div class="demo-app">
    <div class="demo-app-main">
      <FullCalendar class="demo-app-calendar" :options="calendarOptions">
        <template v-slot:eventContent="arg">
          <b>{{ arg.timeText }}</b>
          <i>{{ arg.event.title }}</i>
        </template>
      </FullCalendar>
    </div>
    <Add v-model="addModal" @add="addEvents" />
    <!-- <Info v-model="infoModal" :info="form" /> -->
    <Detail v-model="infoModal" :info="form" @showEdit="showEdit" />
    <Edit v-model="editModel" />
  </div>

</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import listPlugin from '@fullcalendar/list'
import interactionPlugin from '@fullcalendar/interaction'
// import { INITIAL_EVENTS, createEventId } from '@/assets/event-utils'
import Add from '@/views/my/components/add'
import Info from '@/views/my/components/info'
import Detail from '@/views/my/components/detail'
import dayjs from 'dayjs'
import Edit from '@/views/my/components/edit'
import calenderFormate from '@/utils/calendar'// 农历计算方法
import { formatDate } from '@/utils/index'
const prefixCls = 'ezb-calendar'

export default {
  components: {
    FullCalendar, // make the <FullCalendar> tag available
    Add,
    Info,
    Detail,
    Edit
  },

  data: function () {
    return {
      prefixCls,
      isRapid: false,
      addModal: false,
      infoModal: false,
      editModel: false,
      info: null,
      form: {},
      calendarOptions: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          listPlugin,
          interactionPlugin // needed for dateClick
        ],
        headerToolbar: {
          left: 'today,prev,next',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listDay'
        },
        buttonText: {
          prev: '‹',
          next: '›',
          prevYear: '«',
          nextYear: '»',
          today: '今日',
          month: '月视图',
          week: '周视图',
          day: '日视图',
          list: '列表视图'
        },
        // eventColor: '#3dd1ae',
        // backgroundColor: '#fff',
        // borderColor: '#f1f1f1',
        // textColor: '#fff',
        initialView: 'dayGridMonth',
        // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
        events: [
          /*     { title: 'event 1', date: '2021-06-01', classNames: ['cal'] },
              { title: 'event 2', date: '2021-06-02', classNames: ['inv'] },
              { title: '公司会议', start: '2021-06-22 09:05', end: '2021-06-23 12:00', classNames: ['cal'] },
              { title: '部门会议', start: new Date(), classNames: ['cal'] } */
        ],
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        displayEventEnd: true,
        select: () => {
          this.addModal = true
          this.isRapid = true
        },
        eventClick: this.clickEvent,
        eventsSet: this.handleEvents,
        height: 750, // 日历高度
        locale: 'zh-cn',

        allDaySlot: false, // allday 整天的日程是否显示
        // slotDuration:'01:30:00',//在agenda的视图中, 两个时间之间的间隔(分钟)
        scrollTime: '09:00:00', // 当切换到agenda时，初始滚动条滚动到的时间位置，默认在6点钟的位置
        firstDay: 7,
        minTime: '06:00:00', // 设置显示的时间从几点开始
        maxTime: '21:00:00', // 设置显示的时间从几点结束
        slotLabelFormat: {
          hour: 'numeric',
          minute: '2-digit',
          hour12: false
        }, // 确定将在议程视图的垂直轴上显示的时间文本。
        businessHours: {
          dow: [1, 2, 3, 4, 5], // 周一 - 周四
          start: '10:00', // 上午10点开始
          end: '18:00' // 下午18点结束
        },
        slotEventOverlap: false, // 设置日程视图中的事件是否可以重叠
        agendaEventMinHeight: true,
        /* you can update a remote database when these fire:
        eventAdd:
        eventChange:
        eventRemove:
        */
        views: {
          // 对应月视图
          dayGridMonth: {
            dayCellContent (item) {
              let _date = formatDate('yyyy-mm-dd', item.date).split('-')
              let _dateF = calenderFormate.solar2lunar(_date[0], _date[1], _date[2])
              return { html: `<p><label>${_dateF.cDay}</label><span>${_dateF.IDayCn}</span></p>` }
            },
            editable: true,
            selectable: true,
            selectMirror: true,
            dayMaxEvents: true,
            weekends: true,
            displayEventEnd: true,// 是否显示时间
          }
        }
      },
      currentEvents: []
    }
  },
  filters: {
    dateFilter (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  created () {
    // 模拟异步数据
    setTimeout(() => {
      this.calendarOptions.events = [
        {
          id: '1',
          title: 'event 1',
          extendedProps: {},
          description: '这是一个事件',
          start: '2021-06-01 12:00:00',
          end: '2021-01-07',
          textColor: '#000',
          backgroundColor: 'red',
          borderColor: 'red'
        },
        { id: '2', title: 'event 2', start: '2021-06-01 12:00:00' },
        { id: '3', title: 'event 1', start: '2021-05-01 12:00:00' },
        { id: '4', title: 'event 2', start: '2021-07-01 12:00:00' },
        { id: '5', title: 'event 3', start: '2021-06-02 12:00:00' },
        { id: '6', title: 'event 4', start: '2021-06-03 12:00:00' },
        {
          id: '7',
          title: 'event 2',
          start: '2021-07-07 07:00:00',
          textColor: 'yellow',
          backgroundColor: 'red',
          className: ['red']
        },
        {
          id: '8',
          title: 'event 5',
          start: '2021-06-08 12:00:00',
          end: '2021-01-08 14:00:00',
          color: 'yellow'
          // textColor: 'red',
          // backgroundColor: 'red',
          // borderColor: 'yellow'
        },
        {
          id: '9',
          title: 'event 5',
          start: '2021-06-09 12:00:00'
          // textColor: 'yellow'
          // borderColor: 'yellow',
          // backgroundColor: 'red'
        }
      ]
    }, 2000)
  },
  methods: {
    addEvents (form) {
      const params = {}
      // console.log('add', form)
      params.id = form.id ? form.id : dayjs().unix()
      params.title = form.title
      params.description = form.description
      params.start = this.filterDate(form.startDay, form.startTime)
      params.end = this.filterDate(form.endDay, form.endTime)
      /*       params.textColor = form.textColor
            params.backgroundColor = form.backgroundColor
            params.borderColor = form.borderColor */

      this.addModal = false
      this.calendarOptions.events.push(params)
    },
    clickEvent (info) {
      this.infoModal = true
      const event = info.event
      this.form.id = event.id
      this.form.title = event.title
      this.form.description = event.extendedProps.description
      this.form.startDay = event.startStr
      this.form.endDay = event.endStr
      if (event.startStr.includes(' ')) {
        this.form.startDay = event.startStr.split(' ')[0]
        this.form.startTime = event.startStr.split(' ')[1]
      }
      if (event.endStr.includes(' ')) {
        this.form.endDay = event.endStr.split(' ')[0]
        this.form.endTime = event.endStr.split(' ')[1]
      }
      this.form.textColor = event.textColor
      this.form.backgroundColor = event.backgroundColor
      this.form.borderColor = event.borderColor
      this.info = info.event
    },
    longPressEvent (info) {
      this.$confirm({
        title: '温馨提示',
        content: '是否确认删除',
        onOk: () => {
          this.options.events = this.options.events.filter(
            event => event.id !== info.event.id
          )
        },
        onCancel: () => { }
      })
    },
    handelEventMouseover (info) {
      this.infoModal = true
      console.log('over', info)
    },
    filterDate (day, time) {
      return day + (time ? ' ' : '') + time
    },
    handleOk () {
      this.addEvents()
    },
    handleCancel () { },
    showEdit () {
      this.editModel = true
    }
  }
}
</script>

<style lang="less" scoped>
.demo-app {
  display: flex;
  min-height: 100%;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
  margin-top: 20px;
  .demo-app-main {
    a {
      color: #707071;
    }
    flex-grow: 1;
    // padding: 2em;
    .demo-app-calendar {
      /deep/.fc-event,
      .fc-event-dot {
        border: none;
        background-color: #1a85ffec;
        :hover {
          background-color: #71b3ffec;
        }
      }
      .fc-daygrid-day-number {
        color: #707071;
      }
      .fc-event-main {
        border: none;
      }
      b {
        /* used for event dates/times */
        margin-right: 3px;
        text-align: left;
      }
      background-color: white;
      .fc-daygrid-event {
        .fc-daygrid-event-dot {
          display: none;
        }
        &.cal {
          padding-left: 5px;
          color: #333;
          border-radius: 0;
          border: none;
          border-left: 2px solid #5289ff;
          background-color: #eef3ff;
          .fc-event-title {
            color: #333;
          }
        }
        &.inv {
          padding-left: 5px;
          color: #333;
          border-radius: 0;
          border: none;
          border-left: 2px solid #ffa327;
          background-color: #fff6e9;
          .fc-event-title {
            color: #333;
          }
        }
      }
      .fc-timegrid-event {
        .fc-daygrid-event-dot {
          display: none;
        }
        &.cal {
          padding-left: 5px;
          color: #333;
          border-radius: 0;
          border: none;
          border-left: 2px solid #5289ff;
          background-color: #eef3ff;
          .fc-event-title {
            color: #333;
          }
        }
        &.inv {
          padding-left: 5px;
          color: #333;
          border-radius: 0;
          border: none;
          border-left: 2px solid #ffa327;
          background-color: #fff6e9;
          .fc-event-title {
            color: #333;
          }
        }
      }
      .fc .fc-toolbar-title {
        display: inline-block;
        vertical-align: middle;
      }
      .fc-theme-standard td {
        border-top-color: transparent;
      }
      .fc .fc-toolbar {
        padding: 0 20px;
      }
      .fc-col-header-cell {
        .fc-scrollgrid-sync-inner {
          a {
            color: #333;
          }
        }
      }
    }
  }
}

.demo-app-sidebar {
  /* width: 300px; */
  line-height: 1.5;
  background: #eaf9ff;
  border-right: 1px solid #d3e2e8;
}
</style>
